<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="d3-tip.css">
</head>
<body>
    
    <script src="d3.min.js"></script>
    <!-- <script src="https://d3js.org/d3.v7.min.js"></script> -->
    <script src="d3-tip.js"></script>
    <script>
        
        const svg = d3.select('body').append('svg');
        svg.attr('width',800);
        svg.attr('height',600);
        svg.style('border','2px solid #ccc');


        var tip = d3.tip()
        .attr('class', 'd3-tip')
        .html(function(e,d) { return d.name+":"+d.value; })
        tip.direction('e')
        tip.offset([0, -0])

       const drag = d3.drag()
            .on('drag.a',function(e,d){
               d.x = e.x ;
               d.y = e.y ;
               circle.attr('cx',d=>d.x);
               console.log(e.x,e.y);
            })
            // .on('start',function(e){
            //     d3.select(e.sourceEvent.target).attr('fill','#666');
            // })
            // .on('drag',function(e ,d){
            //     d.x = e.x;
            //     d.y = e.y ;
            // })
            // .on('end',function (e,d){
            //     d3.select(e.sourceEvent.target).attr('fill','#000');
            // })
            // .on('drag.update',(e)=>{
            //     circle.attr('cx',d=>d.x).attr('cy',d=>d.y)
            // })
            // .filter(function(){
            //     console.log(arguments);
            //     return true ;
            // })

       const circle = svg.append('circle')
        .data([{x:50,y:50}])
        .attr('cx',d=>d.x)
        .attr('cy',d=>d.y)
        .attr('r',50)
        .call(drag)
        
                

    </script>
</body>
</html>